<template>
  <div class="data-part">
    <DataHandle />
    <div class="part-right">
      <div class="title"></div>
      <div class="main"></div>
    </div>

    <div class="tab-box">
      <ComRadioTabA :tab="currentTab" :tab-list="tabList" @change="changeTime" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from 'vue';
import DataHandle from './dataHandle/index.vue';
import ComRadioTabA from "@/components/tabComp/ComRadioTabA.vue";

const currentTab = ref('1');

const tabList = [
  { name: '1', label: '今日' },
  { name: '2', label: '本月' },
  { name: '3', label: '今年' },
];

function changeTime(val: string) {
  currentTab.value = val;
}

defineComponent({ name: 'DataPart' });
</script>

<style scoped lang="scss">
.data-part {
  @apply relative w-full h-auto mt-[66px] grid grid-cols-2 gap-[66px];

  .part-right {
    .title {
      @apply w-full h-[57px];
      background: url('./assets/right-title.png') no-repeat center;
    }

    .main {
      @apply w-full h-[326px] mt-[17px];
      background: url('./assets/right-data.png') no-repeat center;
    }
  }

  .tab-box {
    @apply absolute right-0 top-[8px];
  }
}
</style>
